<template>
  <div class="tableinner bigTableStyle">
    <el-table
      :data="tableData"
      :row-class-name="tableRowClassName"
      style="width: 100%"
      border
      height="100%"
       v-loading="isShowLoadings"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.5)"
    >
      <el-table-column  label="序号" prop="myIndex" width="80"></el-table-column>
      <el-table-column prop="SSDSMC" label="所属单位" width="180" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="WHBZMC" label="维护班组"  width="180" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="DMMC" :show-overflow-tooltip="true" width="140" label="电压等级"></el-table-column>
      <el-table-column prop="BDZMC" :show-overflow-tooltip="true"  width="220"  label="所属变电站"></el-table-column>
      <!-- <el-table-column prop="" :show-overflow-tooltip="true" width="120" label="间隔单元"></el-table-column> -->
      <el-table-column prop="DEVICE_NAME" :show-overflow-tooltip="true" label="设备名称"></el-table-column>
      <el-table-column prop="GJXXXX" :show-overflow-tooltip="true"  label="事件内容"></el-table-column>
      <!-- <el-table-column prop="VAL" :show-overflow-tooltip="true" width="120" label="当前状态"></el-table-column> -->
      <el-table-column prop="JCSJ" :show-overflow-tooltip="true"  width="200" label="操作时间"></el-table-column>
    </el-table>
  </div>
</template>

<script lang="ts">
import { Component, Vue ,Prop,Watch} from "vue-property-decorator";

@Component
export default class extends Vue {
    @Prop({ default: () => [] })
    tableData;
    @Prop({default:()=> true})
    isShowLoading;
  // 表格隔行变色
  tableRowClassName(row, rowIndex) {
    if (rowIndex % 2 === 0) {
      return "row1";
    } else {
      return "row2";
    }
  }
  get isShowLoadings (){
    return this.isShowLoading
  }
  //  @Watch("tableData", {  deep: true })
  // gettableData(to) {
  //    this.isShowLoading=false
  // }
}
</script>

<style lang="scss" scoped>
.tableinner {
  width: 100%;
  height: 100%;
  .red{
    color: red;
  }
}
</style>

